<!--
 * @Date: 2022-05-26 11:06:19
 * @Author: 陶子
 * @LastEditTime: 2023-07-03 15:21:46
 * @FilePath: \jk_one-stop_pc\src\views\bigView\equipment\equipmentFullView.vue
 * @pageName: 这是--(设备大屏主页面)--页面
-->
<template>
  <div class="outBox">
    <div class='topBox'>
      <div class='topLeftBox'>
        <div class='topLeft_top'>
          <div class='topLeftTop_border screen-border'>
            <typeProportion ref="typeProportion" :proportionData='proportionData' />
          </div>
        </div>
      </div>
      <div class="topCenterBox">
        <div class='topCenterBox_center'>
          <div class='topCenterBox_border screen-border'>
            <equipmentInfo ref="equipmentInfo" :infoData='infoData' />
          </div>
        </div>
      </div>
      <div class='topRightBox'>
        <div class='topRight_bot'>
          <div class='topLeftTop_border screen-border'>
            <faultCategory ref="faultCategory" :categoryData='categoryData' />
          </div>
        </div>
      </div>
    </div>
    <div class='botBox'>
      <div class='botLeftBox'>
        <div class='topLeftTop_border screen-border'>
          <publicRoll ref="publicRoll" :rollData='botOneData' :headerTitle='`点巡检任务（今日${botOneTotal}）`'>
            <div class="tableHeaderBox" slot="tableHeader">
              <div class="tableOne">任务编号</div>
              <div class="tableThree">方案名称</div>
              <div class="tableFour">设备类型</div>
              <div class="tableFive">设备名称</div>
              <div class="tableSix">状态</div>
            </div>
            <div class="rowClass" slot="rowBox" slot-scope="{item}">
              <div class="itemDot" :style="{background: item.taskStatus == '1' ? '#14B982' : ''}"></div>
              <div class="itemBoxOne" :title="item.taskCode">{{item.taskCode}}</div>
              <div class="itemBoxThree" :title="subStrText(item.programName,6)">{{subStrText(item.programName,6)}}</div>
              <div class="itemBoxFour" :title="subStrText(item.deviceCategoryText,6)">{{subStrText(item.deviceCategoryText,6)}}</div>
              <div class="itemBoxFive" :title="subStrText(item.deviceName,6)">{{subStrText(item.deviceName,6)}}</div>
              <div class="itemBoxSix" :title="item.taskStatusText" :style="{ color: checkColor(item) }">{{item.taskStatusText}}</div>
            </div>
          </publicRoll>
        </div>
      </div>
      <div class='botCenterBox'>
        <div class='topLeftTop_border screen-border'>
          <publicRoll ref="publicRoll" :rollData='botTwoData' :headerTitle='`故障报修（今日${botTwoTotal}）`'>
            <div class="tableHeaderBox" slot="tableHeader">
              <div class="tableOne">报修编号</div>
              <div class="tableThree">设备类别</div>
              <div class="tableFour">设备名称</div>
              <div class="tableFive">状态</div>
              <div class="tableSix">报修人</div>
            </div>
            <div class="rowClass" slot="rowBox" slot-scope="{item}">
              <div class="itemDot" :style="{background: checkTwoColor(item)}"></div>
              <div class="itemBoxOne" :title="item.repairCode">{{item.repairCode}}</div>
              <div class="itemBoxThree" :title="subStrText(item.deviceCategoryText,6)">{{subStrText(item.deviceCategoryText,6)}}</div>
              <div class="itemBoxFour" :title="subStrText(item.deviceName,6)">{{subStrText(item.deviceName,6)}}</div>
              <div class="itemBoxFive" :title="item.statusText" :style='{color:checkTwoColor(item)}'>{{item.statusText}}</div>
              <div class="itemBoxSix" :title="item.createByText" style="color:#1890ff">{{item.createByText}}</div>
            </div>
          </publicRoll>
        </div>
      </div>
      <div class="botRightBox">
        <div class='rightBox_right'>
          <div class='topLeftTop_border screen-border'>
            <publicRoll ref="publicRoll" :rollData='botThreeData' :headerTitle='`保养任务（今日${botThreeTotal}）`'>
              <div class="tableHeaderBox" slot="tableHeader">
                <div class="tableOne">任务编号</div>
                <div class="tableThree">方案名称</div>
                <div class="tableFour">设备类型</div>
                <div class="tableFive">设备名称</div>
                <div class="tableSix">状态</div>
              </div>
              <div class="rowClass" slot="rowBox" slot-scope="{item}">
                <div class="itemDot" :style="{background: checkThreeColor(item)}"></div>
                <div class="itemBoxOne" :title="item.taskCode">{{item.taskCode}}</div>
                <div class="itemBoxThree" :title="subStrText(item.programName,6)">{{subStrText(item.programName,6)}}</div>
                <div class="itemBoxFour" :title="subStrText(item.deviceCategoryText,6)">{{subStrText(item.deviceCategoryText,6)}}</div>
                <div class="itemBoxFive" :title="subStrText(item.deviceName,6)">{{subStrText(item.deviceName,6)}}</div>
                <div class="itemBoxSix" :title="item.taskStatusText" :style='{color:checkThreeColor(item)}'>{{item.taskStatusText}}</div>
              </div>
            </publicRoll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryByKey,
  checkTaskList,
  deviceRepairList,
  maintainTaskList,
  deviceCategoryNumRate,
  getDeviceStatus,
  deviceFaultCategoryStatistics,
} from '@/api/productOrder'
import publicRoll from '../publicRoll.vue' //公共滚动工单
import typeProportion from './components/typeProportion.vue' //设备类别占比
import equipmentInfo from './components/equipmentInfo.vue' //设备现状
import faultCategory from './components/faultCategory.vue' //故障类别TOP5（近6个月）
import { numFormat, compareDate, subStrText } from '@/utils/util'
export default {
  components: {
    publicRoll,
    typeProportion,
    equipmentInfo,
    faultCategory,
  },
  watch: {},
  data() {
    return {
      subStrText,
      botOneData: [],
      botOneTotal: 0,
      botTwoData: [],
      botTwoTotal: 0,
      botThreeData: [],
      botThreeTotal: 0,
      proportionData: [],
      infoData: {},
      categoryData: [],
      timeOut: 0,
      seter: null,
    }
  },
  beforeDestroy() {
    clearInterval(this.seter)
  },
  created() {
    let timeObj = {
      key: 'bigScreenRefreshTime',
    }
    queryByKey(timeObj).then((res) => {
      if (res.code == 200) {
        this.timeOut = res.result
        this.createSet()
      } else {
        this.$antdMessage.error(res.message)
      }
    })
    this.getAllData()
  },
  methods: {
    getAllData() {
      let obj = {
        pageSize: 9999,
        pageNo: 1,
      }
      checkTaskList(obj).then((res) => {
        if (res.code == 200) {
          this.botOneData = res.result.records
          this.botOneTotal = res.result.total
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      deviceRepairList(obj).then((res) => {
        if (res.code == 200) {
          this.botTwoData = res.result.records
          this.botTwoTotal = res.result.total
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      maintainTaskList(obj).then((res) => {
        if (res.code == 200) {
          this.botThreeData = res.result.records
          this.botThreeTotal = res.result.total
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      deviceCategoryNumRate().then((res) => {
        if (res.code == 200) {
          this.proportionData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      getDeviceStatus().then((res) => {
        if (res.code == 200) {
          this.infoData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })
      deviceFaultCategoryStatistics().then((res) => {
        if (res.code == 200) {
          this.categoryData = res.result
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    createSet() {
      this.seter = setInterval(() => {
        this.getAllData()
      }, this.timeOut)
    },
    checkColor(row) {
      let colorStr = ''
      if (row.taskStatusText == '待检查') {
        colorStr = '#42DBEC'
      } else if (row.taskStatusText == '已完成') {
        colorStr = '#14B982'
      } else {
        colorStr = ''
      }
      return colorStr
    },
    checkTwoColor(row) {
      let colorStr = ''
      switch (row.status) {
        case 'wait_receipt':
          colorStr = '#F32144'
          break
        case 'repairing':
          colorStr = '#42DBEC'
          break
        case 'wait_verify':
          colorStr = '#FFDF4C'
          break
        case 'completed':
          colorStr = '#14B982'
          break
      }
      return colorStr
    },
    checkThreeColor(row) {
      let colorStr = ''
      switch (row.taskStatusText) {
        case '保养中':
          colorStr = '#42DBEC'
          break
        case '已完成':
          colorStr = '#14B982'
          break
      }
      return colorStr
    },
  },
}
</script> 

<style scoped lang='less'>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.screen-border {
  height: 100%;
  box-sizing: border-box;
  padding: 0.01rem 0.25rem 0.25rem;
  background-size: 100% 100%;
  background-position: top center;
}
.topLeftTop_border {
  background-image: url('~@/assets/img/production_one.png');
}
.topCenterBox_border {
  background-image: url('~@/assets/img/screen-p3.png');
}
.outBox {
  box-sizing: border-box;
  padding: 0 0.23rem;
  height: 100%;
  .topBox {
    .flex(space-between,flex-start);
    margin-top: 0.25rem;
    .topLeftBox {
      flex: 1;
      .topLeft_top {
        width: 100%;
        height: 5.95rem;
      }
    }
    .topCenterBox {
      flex: 1;
      margin: 0 0.25rem;
      .topCenterBox_center {
        width: 100%;
        height: 5.95rem;
      }
    }
    .topRightBox {
      flex: 1;
      .topRight_bot {
        width: 100%;
        height: 5.95rem;
      }
    }
  }

  .botBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    .botLeftBox {
      flex: 1;
      height: 6.85rem;
    }
    .botCenterBox {
      flex: 1;
      height: 6.85rem;
      margin: 0 0.25rem;
    }
    .botRightBox {
      flex: 1;
      .rightBox_right {
        height: 6.85rem;
      }
    }
  }
}
div.tableHeaderBox {
  margin-top: 0.2rem;
  background: rgba(0, 120, 255,0.12);
  font-size: 0.18rem;
  color: #fff;
  .flex(flex-start,center);
  box-sizing: border-box;
  padding: 0.2rem 0.2rem 0.2rem 0.4rem;
  div.tableOne {
    width: 2rem;
  }

  div.tableThree {
    width: 1.25rem;
  }

  div.tableFour {
    width: 1.25rem;
  }

  div.tableFive {
    width: 1.25rem;
  }

  div.tableSix {
    flex: 1;
  }
}
.rowClass {
  color: #87BBF5;
  font-size: 0.18rem;
  .flex(flex-start,center);
  div.itemBoxOne {
    width: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  div.itemBoxThree {
    width: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div.itemBoxFour {
    width: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div.itemBoxFive {
    width: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div.itemBoxSix {
    flex: 1;
  }
  .itemDot {
    width: 0.15rem;
    height: 0.15rem;
    background: #42DBEC;
    border-radius: 50%;
    margin-right: 0.05rem;
  }
}
</style>
